import React from "react";
import { Space, Tag } from "antd";
import GoBack from "@/components/TheGoBack";
import TheImage from "@/components/TheImage";
import TheTable from "@/components/TheTable";
import { goodsTagsList } from '@/request/storeBackManage/goodsManage/goodsList'
import { goodsInfoDetail } from '@/request/storeBackManage/goodsManage/centerGoodsList'
import _ from 'lodash'
import '../style/style.scss'

export default class Detail extends React.Component {
  state = {
    goodsId: '', //商品id
    goodsInfoData: [], //基本信息
    freightTemplateName: '',//交易运费模板信息
    columns: [], //商品规格信息
    dataSource: [], //商品规格信息数据
    productTxt: '', //商品详情内容
    goodsTagOptions: []
  };
  async componentDidMount() {
    // 商品标签列表
    let res = await goodsTagsList({ type: "goods_tag" })
    if (res.code === 0) {
      let goodsTagOptions = res.data.map((v) => {
        return { label: v.name, value: v.dictionariesId }
      })
      this.setState({ goodsTagOptions })
    }
    await this.getData()
  }
  // 获取数据
  getData = async () => {
    const { id } = this.props.match.params
    const { goodsTagOptions } = this.state
    let res = await goodsInfoDetail({ goodsId: id })
    if (res.code === 0 && res.data) {
      const { goodsInfo, skuInfo } = res.data;
      let defaultTag = []
      let goodsTag = goodsInfo.goodsTag !== null ? goodsInfo.goodsTag.split(',') : []
      goodsTagOptions.map((v) => {
        goodsTag.map((g) => {
          if (v.value === g) {
            return defaultTag.push(v)
          }
        })
      })
      // 基本信息
      let goodsInfoData = [
        {
          value: goodsInfo.goodsName,
          label: "商品名称",
        },
        {
          value: (
            defaultTag.map((v) => {
              return <Tag>{v.label}</Tag>
            })
          ),
          label: "适用宠物",
        },
        {
          value: goodsInfo.goodsClassifyName,
          label: "商品类目",
        },
        {
          value: (
            <Space>
              {goodsInfo.goodsShowImages.split(",").map((v) => {
                return <TheImage width={80} height={80} src={v} />;
              })}
            </Space>
          ),
          label: "商品图片",
        },
      ];
      let dataSource = skuInfo.map((v, i) => {
        let obj = {};
        v.skuAttribute.forEach((j, k) => {
          obj[k] = j.value;
        });
        obj.materialId = v.materialId;
        obj.materialName = v.materialName;
        obj.skuOriginalPrice = <React.$Price price={v.skuOriginalPrice} />;
        obj.skuCurrentPrice = <React.$Price price={v.skuCurrentPrice} />;
        obj.realStock = parseInt(v.realStock).toLocaleString();
        obj.skuIntegral = parseInt(v.skuIntegral).toLocaleString();
        obj.skuWeight = `${v.skuWeight / 1000}kg`;
        obj.skuDescription = v.skuDescription;
        obj.imageFile = <TheImage src={v.imageFile} width={80} height={80} />;
        obj.SKUId = v.SKUId;
        obj.skuId = v.skuId;
        obj.skuStatus = v.skuStatus;
        return obj;
      });

      let columns = [];
      _.forEach(skuInfo[0].skuAttribute, (v, i) => {
        columns.push({
          title: v.key,
          dataIndex: i,
          key: i,
        });
      });
      columns = columns.concat([
        {
          title: "物料ID",
          dataIndex: "materialId",
          key: "materialId",
        },
        {
          title: "商品物料名称(仓库用 APP不显示)",
          dataIndex: "materialName",
          key: "materialName",
        },
        {
          title: "原价",
          dataIndex: "skuOriginalPrice",
          key: "skuOriginalPrice",
        },
        {
          title: "现价",
          dataIndex: "skuCurrentPrice",
          key: "skuCurrentPrice",
        },
        {
          title: "库存",
          dataIndex: "realStock",
          key: "realStock",
        },
        {
          title: "重量(KG)",
          dataIndex: "skuWeight",
          key: "skuWeight",
        },
        {
          title: "描述",
          dataIndex: "skuDescription",
          key: "skuDescription",
        },
        {
          title: "图片",
          dataIndex: "imageFile",
          key: "imageFile",
        },
      ]);
      this.setState({
        goodsInfoData,
        productTxt: goodsInfo.productTxt,
        columns: columns,
        dataSource,
      })
    }

  }
  render() {
    const { goodsInfoData, columns, dataSource, productTxt } = this.state;
    return (
      <div className="content-list p-layout-box">
        <GoBack history={this.props.history} title={"商品详情"} />
        <div className="content-title">基本信息</div>
        {
          goodsInfoData.map(item => {
            return (
              <div className="content-info">
                <p>{item.label}:</p>
                <div>{item.value}</div>
              </div>
            )
          })
        }
        <div className="content-title">商品规格信息</div>
        <TheTable columns={columns} dataSource={dataSource} rowKey="materialId"></TheTable>
        <div className="content-title">商品详情</div>
        <div className="content-info">
          <p
            style={{ overflowX: "auto" }}
            dangerouslySetInnerHTML={{ __html: productTxt }}
          />
        </div>
      </div>
    );
  }
}

